<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-20 01:02:45
 * @LastEditTime: 2024-06-20 11:15:05
-->
<script lang="ts" setup>
import { useConfig } from "@/hooks/store/index";
const {
  Widgets,
  tabsHideChange,
  tabsHeightChange,
  asideWidthChange,
  headerHeightChange,
  footerHideChange
} = useConfig();
</script>
<template>
  <el-divider content-position="center"
    ><span class="font-size-4">{{ $t(`title.useTitle`) }}</span></el-divider
  >

  <div class="picker padding-left-right-10">
    <div class="between-space-justify padding-top-bottom-5">
      <span style="font-size: 15px">{{ $t(`title.use.tabsHide`) }} </span>
      <el-switch v-model="Widgets.tab.hide" @change="tabsHideChange" />
    </div>
    <div
      class="between-space-justify padding-top-bottom-5"
      v-show="Widgets.tab.hide"
    >
      <span style="font-size: 15px">{{ $t(`title.use.tabsHeight`) }} </span>
      <el-input-number
        v-model="Widgets.tab.height"
        :min="30"
        :max="120"
        controls-position="right"
        @change="tabsHeightChange"
        style="width: 120px"
      />
    </div>
    <div
      class="between-space-justify padding-top-bottom-5"
      v-show="Widgets.tab.hide"
    >
      <span style="font-size: 15px">{{ $t(`title.use.tabsStyle`) }} </span>
      <el-select-v2
        v-model="Widgets.tab.style"
        :options="[{ label: '默认风格', value: 'default' }]"
        style="width: 120px"
        disabled
      >
      </el-select-v2>
    </div>

    <div class="between-space-justify padding-top-bottom-5">
      <span style="font-size: 15px">{{ $t(`title.use.asideWidth`) }} </span>
      <el-input-number
        :min="160"
        v-model="Widgets.asideWidth"
        controls-position="right"
        @change="asideWidthChange"
        style="width: 120px"
      />
    </div>

    <div class="between-space-justify padding-top-bottom-5">
      <span style="font-size: 15px">{{ $t(`title.use.headerHeight`) }} </span>
      <el-input-number
        v-model="Widgets.headerHeight"
        controls-position="right"
        @change="headerHeightChange"
        style="width: 120px"
      />
    </div>

    <div class="between-space-justify padding-top-bottom-5">
      <span style="font-size: 15px">{{ $t(`title.use.footerHide`) }} </span>
      <el-switch v-model="Widgets.footer.hide" />
    </div>
    <div class="between-space-justify padding-top-bottom-5" v-show="Widgets.footer.hide">
      <span style="font-size: 15px">{{ $t(`title.use.footerHeight`) }} </span>
      <el-input-number
        v-model="Widgets.footer.height"
        controls-position="right"
        @change="footerHideChange"
        style="width: 120px"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped></style>
